<script lang="ts" setup>
import type { SysUserWriteParamsType } from '../utils/model'
import { getUserDetailsAPI } from '../utils/api'
import { formRule } from './rule'
import dayjs from 'dayjs'
import { getAllParentIds } from '@/utils/dept'
import type { SysDeptListType } from '@/views/admin/system/dept/utils/model'
import type { SysPostListType } from '@/views/admin/system/post/utils/model'
import type { SysRoleListType } from '@/views/admin/system/role/utils/model'

type Props = {
  roleList: SysRoleListType[]
  postList: SysPostListType[]
  id?: number
  treeData: SysDeptListType[]
}

// 表单Ref
const formRef = ref()
// props
const { roleList, postList, id, treeData } = defineProps<Props>()
//加载状态
const loading = ref(true)
// 表单数据
const formState = ref<SysUserWriteParamsType>({
  id: null,
  deptId: null,
  phone: '',
  username: '',
  sex: 1,
  status: 1,
  remark: '',
  postIds: []
} as SysUserWriteParamsType)

// 判断是否是修改
if (id) {
  getUserDetails(id)
} else {
  loading.value = false
}

/** 获取用户详情 */
async function getUserDetails(id: number) {
  loading.value = true
  getUserDetailsAPI(id).then((res) => {
    let userDetails = res.data
    if (userDetails.roles) {
      userDetails.roleIds = userDetails.roles.map((item) => item.id)
    }
    if (userDetails.posts) {
      userDetails.postIds = userDetails.posts.map((item) => item.id)
    }
    loading.value = false
    userDetails.birthday = dayjs(userDetails.birthday, 'YYYY-MM-DD') as string
    Object.assign(formState.value, userDetails)
    deptSelectKeys.value = getAllParentIds(userDetails.deptId as number, treeData)
  })
}

// 部门选择上的keys
const deptSelectKeys = ref<number[]>()

// 部门选择
function changeDeptSelect(value: number[] | undefined) {
  formState.value.deptId = value == undefined ? null : value[value.length - 1]
}

function getRef() {
  return formRef.value
}

defineExpose({ getRef })
</script>

<template>
  <a-spin :spinning="loading">
    <a-form
      ref="formRef"
      :labelCol="{ style: { width: '80px' } }"
      :model="formState"
      :rules="formRule"
      label-align="left"
      style="margin-top: 15px"
    >
      <a-row :gutter="30">
        <a-col :span="12">
          <a-form-item label="用户名" name="username">
            <a-input
              v-model:value="formState.username"
              :disabled="id"
              placeholder="请输入用户名"
              type="text"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="手机号码" name="phone">
            <a-input v-model:value="formState.phone" placeholder="请输入手机号码" type="text" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="部门" name="deptId">
            <a-cascader
              v-model:value="deptSelectKeys"
              :field-names="{ label: 'deptName', value: 'id', children: 'children' }"
              :options="treeData"
              change-on-select
              placeholder="请你选择部门"
              @change="changeDeptSelect"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="岗位" name="postIds">
            <a-select v-model:value="formState.postIds" mode="multiple" placeholder="请选择岗位">
              <a-select-option v-for="item in postList" :key="item.id" :value="item.id">{{
                item.postName
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="昵称" name="name">
            <a-input v-model:value="formState.name" placeholder="请输入昵称" type="text" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="密码" name="password">
            <a-input-password
              v-model:value="formState.password as string"
              placeholder="请输入密码"
              type="text"
            />
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="生日" name="birthday">
            <a-date-picker
              v-model:value="formState.birthday as string"
              placeholder="请选择生日"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="角色" name="roleIds">
            <a-select v-model:value="formState.roleIds" mode="multiple" placeholder="请选择角色">
              <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <SpDict
            v-model="formState.sex"
            dictType="user_sex"
            label="性别"
            name="sex"
            type="radio"
          />
        </a-col>
        <a-col :span="12">
          <SpDict
            v-model="formState.status"
            dictType="sys_user_status"
            label="状态"
            name="status"
            type="radio"
          />
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" name="remark">
            <a-textarea v-model:value="formState.remark as string" placeholder="请输入备注" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<style scoped></style>
